<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="label" label="菜单名字" width="180">
            </el-table-column>
            <el-table-column prop="href" label="链接地址" width="180">
            </el-table-column>
            <el-table-column prop="imgicon" label="图标" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" type="primary" @click="add">增加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="up(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 增加菜单 -->
        <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleAdd">
            <el-form :model="formadd">
                <el-form-item label="菜单名字" label-width="80px">
                    <el-input v-model="formadd.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" label-width="80px">
                    <el-input v-model="formadd.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <i :class="formadd.imgicon"></i>
                    <el-select v-model="formadd.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                            <span style="margin-left: 10px">{{ item }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属父级" label-width="80px">
                    <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formadd.parentid"
                        :options="parentidOptions"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsubmit = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑菜单 -->
        <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleUp">
            <el-form :model="formup">
                <el-form-item label="菜单名字" label-width="80px">
                    <el-input v-model="formup.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" label-width="80px">
                    <el-input v-model="formup.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <i :class="formup.imgicon"></i>
                    <el-select v-model="formup.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                            <span style="margin-left: 10px">{{ item }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属父级" label-width="80px">
                    <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formup.parentid"
                        :options="parentidOptions"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleup = false">取 消</el-button>
                <el-button type="primary" @click="upsubmit = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            imgiconoptions: ["el-icon-platform-eleme",
"el-icon-eleme",
"el-icon-delete-solid",
"el-icon-delete",
"el-icon-s-tools",
"el-icon-setting",
"el-icon-user-solid",
"el-icon-user",
"el-icon-phone",
"el-icon-phone-outline",
"el-icon-more",
"el-icon-more-outline",
"el-icon-star-on",
"el-icon-star-off",
"el-icon-s-goods",
"el-icon-goods",
"el-icon-warning",
"el-icon-warning-outline",
"el-icon-question",
"el-icon-info",
"el-icon-remove",
"el-icon-circle-plus",
"el-icon-success",
"el-icon-error",
"el-icon-zoom-in",
"el-icon-zoom-out",
"el-icon-remove-outline",
"el-icon-circle-plus-outline",
"el-icon-circle-check",
"el-icon-circle-close",
"el-icon-s-help",
"el-icon-help",
"el-icon-minus",
"el-icon-plus",
"el-icon-check",
"el-icon-close",
"el-icon-picture",
"el-icon-picture-outline",
"el-icon-picture-outline-round",
"el-icon-upload",
"el-icon-upload2",
"el-icon-download",
"el-icon-camera-solid",
"el-icon-camera",
"el-icon-video-camera-solid",
"el-icon-video-camera",
'el-icon-message-solid',
'el-icon-bell',
'el-icon-s-cooperation',
'el-icon-s-order',
'el-icon-s-platform',
'el-icon-s-fold',
'el-icon-s-unfold',
'el-icon-s-operation',
'el-icon-s-promotion',
'el-icon-s-home',
'el-icon-s-release',
'el-icon-s-ticket',
'el-icon-s-management',
'el-icon-s-open',
'el-icon-s-shop',
'el-icon-s-marketing',
'el-icon-s-flag',
'el-icon-s-comment',
'el-icon-s-finance',
'el-icon-s-claim',
'el-icon-s-custom',
'el-icon-s-opportunity',
'el-icon-s-data',
'el-icon-s-check',
'el-icon-s-grid',
'el-icon-menu',
'el-icon-share',
'el-icon-d-caret',
'el-icon-caret-left',
'el-icon-caret-right',
'el-icon-caret-bottom',
'el-icon-caret-top',
'el-icon-bottom-left',
'el-icon-bottom-right',
'el-icon-back',
'el-icon-right',
'el-icon-bottom',
'el-icon-top',
'el-icon-top-left',
'el-icon-top-right',
'el-icon-arrow-left',
'el-icon-arrow-right',
'el-icon-arrow-down',
'el-icon-arrow-up',
'el-icon-d-arrow-left',
'el-icon-d-arrow-right',
'el-icon-video-pause',
'el-icon-video-play',
'el-icon-refresh',
'el-icon-refresh-right',
'el-icon-refresh-left',
'el-icon-finished',
'el-icon-sort',
'el-icon-sort-up',
'el-icon-sort-down',
'el-icon-rank',
'el-icon-loading',
'el-icon-view',
'el-icon-c-scale-to-original',
'el-icon-date',
'el-icon-edit',
'el-icon-edit-outline',
'el-icon-folder',
'el-icon-folder-opened',
'el-icon-folder-add',
'el-icon-folder-remove',
'el-icon-folder-delete',
'el-icon-folder-checked',
'el-icon-tickets',
'el-icon-document-remove',
'el-icon-document-delete',
'el-icon-document-copy',
'el-icon-document-checked',
'el-icon-document',
'el-icon-document-add',
'el-icon-printer',
'el-icon-paperclip',
'el-icon-takeaway-box',
'el-icon-search',
'el-icon-monitor',
'el-icon-attract',
'el-icon-mobile',
'el-icon-scissors',
'el-icon-umbrella',
'el-icon-headset',
'el-icon-brush',
'el-icon-mouse',
'el-icon-coordinate',
'el-icon-magic-stick',
'el-icon-reading',
'el-icon-data-line',
'el-icon-data-board',
'el-icon-pie-chart',
'el-icon-data-analysis',
'el-icon-collection-tag',
'el-icon-film',
'el-icon-suitcase',
'el-icon-suitcase-1',
'el-icon-receiving',
'el-icon-collection',
'el-icon-files',
'el-icon-notebook-1',
'el-icon-notebook-2',
'el-icon-toilet-paper',
'el-icon-office-building',
'el-icon-school',
'el-icon-table-lamp',
'el-icon-house',
'el-icon-no-smoking',
'el-icon-smoking',
'el-icon-shopping-cart-full',
'el-icon-shopping-cart-1',
'el-icon-shopping-cart-2',
'el-icon-shopping-bag-1',
'el-icon-shopping-bag-2',
'el-icon-sold-out',
'el-icon-sell',
'el-icon-present',
'el-icon-box',
'el-icon-bank-card',
'el-icon-money',
'el-icon-coin',
'el-icon-wallet',
'el-icon-discount',
'el-icon-price-tag',
'el-icon-news',
'el-icon-guide',
'el-icon-male',
'el-icon-female',
'el-icon-thumb',
'el-icon-cpu',
"el-icon-link",
"el-icon-connection",
"el-icon-open",
'el-icon-turn-off',
'el-icon-set-up',
'el-icon-chat-round',
'el-icon-chat-line-round',
'el-icon-chat-square',
"el-icon-chat-dot-round",
"el-icon-chat-dot-square",
"el-icon-chat-line-square",
"el-icon-message",
"el-icon-postcard",
"el-icon-position",
"el-icon-turn-off-microphone",
"el-icon-microphone",
"el-icon-close-notification",
"el-icon-bangzhu",
"el-icon-time",
"el-icon-odometer",
"el-icon-crop",
"el-icon-aim",
"el-icon-switch-button",
"el-icon-full-screen",
"el-icon-copy-document",
"el-icon-mic",
"el-icon-stopwatch",
"el-icon-medal-1",
"el-icon-medal",
"el-icon-trophy",
"el-icon-trophy-1",
"el-icon-first-aid-kit",
"el-icon-discover",
"el-icon-place",
"el-icon-location",
"el-icon-location-outline",
"el-icon-location-information",
"el-icon-add-location",
"el-icon-delete-location",
"el-icon-map-location",
"el-icon-alarm-clock",
"el-icon-timer",
"el-icon-watch-1",
"el-icon-watch",
"el-icon-lock",
"el-icon-unlock",
"el-icon-key",
"el-icon-service",
"el-icon-mobile-phone",
"el-icon-bicycle",
"el-icon-truck",
"el-icon-ship",
'el-icon-basketball',
"el-icon-football",
"el-icon-soccer",
"el-icon-baseball",
"el-icon-wind-power",
"el-icon-light-rain",
"el-icon-lightning",
"el-icon-heavy-rain",
"el-icon-sunrise",
"el-icon-sunrise-1",
"el-icon-sunset",
"el-icon-sunny",
"el-icon-cloudy",
"el-icon-partly-cloudy",
"el-icon-cloudy-and-sunny",
"el-icon-moon",
"el-icon-moon-night",
"el-icon-dish",
"el-icon-dish-1",
"el-icon-food",
"el-icon-chicken",
"el-icon-fork-spoon",
"el-icon-knife-fork",
"el-icon-burger",
"el-icon-tableware",
"el-icon-sugar",
"el-icon-dessert",
"el-icon-ice-cream",
"el-icon-hot-water",
"el-icon-water-cup",
"el-icon-coffee-cup",
"el-icon-cold-drink",
"el-icon-goblet",
"el-icon-goblet-full",
"el-icon-goblet-square",
"el-icon-goblet-square-full",
"el-icon-refrigerator",
"el-icon-grape",
"el-icon-watermelon",
"el-icon-cherry",
"el-icon-apple",
"el-icon-pear",
"el-icon-orange",
"el-icon-coffee",
"el-icon-ice-tea",
"el-icon-ice-drink",
"el-icon-milk-tea",
"el-icon-potato-strips",
"el-icon-lollipop",
"el-icon-ice-cream-square",
"el-icon-ice-cream-round"],
            tableData: [],
            dialogFormVisibleAdd: false,
            dialogFormVisibleUp:false,//控制编辑菜单的显示
            formadd: {
                label: "",
                href: "",
                imgicon: "",
                parentid: 0
            },
            formup: {
                id:0,
                label: "",
                href: "",
                imgicon: "",
                parentid: 0
            },
            parentidOptions: [],//父级菜单集合
            parentidProps: {
                value: "id",
                emitPath: false,
                checkStrictly: true
            },//配置父级菜单cascder

        },
        methods: {
            initTableData() {
                let that = this
                axios.get(API + "boot/selectMenu").then(function (res) {
                    that.tableData = res.data.data.menuList
                }).catch(err => {
                    console.log(err)
                });
            },

            up(index, row) {
                this.selectAllMenu()//先填充父级菜单列表
                //根据id获取修改的对象
                let that = this
                axios.get(API + "boot/selectMenuByid/"+row.id).then(function (res) {
                    let menu=res.data.data.menu
                    that.formup=menu
                   console.log(res.data.data)
                }).catch(err => {
                    console.log(err)
                });
                this.dialogFormVisibleUp = true
                console.log(index, row);
            }, add() {
               this.selectAllMenu()
                this.dialogFormVisibleAdd = true
            },selectAllMenu(){
                let that = this
                axios.get(API + "boot/selectMenu").then(function (res) {
                    let arrs = arrayToTree(res.data.data.menuList)
                    that.parentidOptions = arrs
                }).catch(err => {
                    console.log(err)
                });
            },
             addsubmit() {//提交
                console.log(this.formadd)
            },upsbmit(){    
                console.log(this.formup)
            }
        }, mounted() {
            this.initTableData();
        }
    })
</script>

</html>